<template>
  <div class="tex-1" v-for="(item, index) in list?.records" :key="index">
    <div class="tesa-1">
      <el-tooltip effect="dark" :content="item.title" placement="top">
        <el-button class="box-item">{{ item.title }}</el-button>
      </el-tooltip>
    </div>
    <div>{{ item.releaseDate }}</div>
  </div>
</template>

<script lang="ts" setup>
import type { arrs1 } from '@/services/types/Applic'

const list = inject<Ref<arrs1>>('list')
</script>

<style lang="scss" scoped>
.tex-1 {
  display: flex;
  width: 100%;
  height: 33px;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  box-sizing: border-box;
  margin: 5px 0;
}
/* 确保 .tesa-1 容器不会超出其父容器的宽度 */
.tesa-1 {
  width: 300px; /* 或者使用max-width来确保其宽度不会超过100px */
}

/* 应用于按钮的样式，以使其文本在一行内省略 */
.box-item {
  max-width: 100%; /* 限制最大宽度为100% */
  padding: 0 5px;
  box-sizing: border-box;
}
:deep() .el-button > span {
  display: block;
  max-width: calc(100% - 2px); /* 按钮内边距总和 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
